{extend name="default:layout:base" /}

{block name="main"}
<div class="container">
    <div class="layui-row">
        <div class="layui-col-md5">
            <h3 class="title">授权绑定小程序（推荐）</h3>
            <div class="con">
                点击下方“授权添加小程序”，请事先准备好小程序管理员微信。
            </div>
            <div>
                {if $auth_url}
                <a href="javascript:;" data-href="{$auth_url}" class="layui-btn layui-btn-normal js-auth">授权登录</a>
                {else /}
                <button class="layui-btn layui-btn-danger">授权链接无法生成，请让站长检查微信开放平台配置！</button>
                {/if}
            </div>
        </div>

        <div class="layui-col-md5 layui-col-lg-offset2">
            <h3 class="title">手动绑定小程序</h3>
            <div class="con">
                手动需先在微信小程序官方后台获取appid和appsecret。
            </div>
            <div>
                <a href="{:url('add')}" class="layui-btn layui-btn-primary">手动绑定</a>
            </div>
        </div>
    </div>

    <div class="layui-row">
        <p style="margin-top: 50px;text-align: center;">还没有小程序？请到微信小程序官方网站<a href="https://mp.weixin.qq.com/" style="color: #0bb20c;"  target="_blank">注册</a>，并认证。</p>
        <!--<p style="margin-top: 50px;text-align: center;">还没有小程序？点击<a href="{:url('minireg/add')}" style="color: #0bb20c; text-decoration: underline">5分钟快速注册</a>。</p>-->
        <div style="text-align: center;display: none;" id="code-container"><img src="" alt="" style="width: 200px;"></div>
    </div>
</div>
{/block}

{block name="js"}
<script>
    layui.use(['jquery', 'layer'], function () {
        var $ = layui.jquery,
            layer = layui.layer;
        $('.js-reg').on('click', function () {
            layer.open({
                type: 1,
                //skin:"layui-layer-rim",//加上边框
                area:['300px', '300px'],
                content:$('#code-container')
            });
        });

        $('.js-auth').on('click', function () {
            top.location.href = $(this).data('href');
        })
    })
</script>
{/block}

{block name="css"}
<style>
    .container{background-color: #fbfbfb;padding: 30px 50px;border: 1px solid #e7e7eb;margin-top: 10px;}
    .title{
        font-size: 20px;
        margin-bottom: 25px;
    }
    .con{height: 90px;padding-bottom: 20px;}
</style>
{/block}
